<script lang="ts" setup>
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const route = ref(useRoute());
const menusList = ref([
  {
    name: 'Beforeunload 拦截组件',
    path: '/demo/beforeunload',
    pathName: 'beforeunload'
  },
  {
    name: 'Screening 筛选组件',
    path: '/demo/screening',
    pathName: 'screening'
  },
  {
    name: 'Table 表格组件',
    path: '/demo/table',
    pathName: 'table'
  },
  {
    name: 'Router 组件',
    path: '/demo/router',
    pathName: 'router',
    params: { paramsId: 123123 },
    query: { queryId: 2312 }
  },
  {
    name: 'Form 表单',
    path: '/demo/forms',
    pathName: 'forms'
  },
  {
    name: 'Open Ai',
    path: '/demo/openai',
    pathName: 'openai'
  },
  {
    name: '拖拽案例',
    path: '/demo/dragout',
    pathName: 'dragout'
  }
]);
const router = useRouter();
const toLinkHandle = ({ pathName, params, query }: any) => {
  console.log(pathName);
  router.push({ name: pathName, params, query });
};
</script>

<template>
  <div class="demo-container flex items-stretch">
    <el-menu
      :router="true"
      :default-active="route.name"
      text-color="#fff"
      active-text-color="#5bc0c3"
      background-color="#00334b"
      class="el-menu-vertical-demo"
    >
      <el-menu-item v-for="menu of menusList" :index="menu.pathName" @click="toLinkHandle(menu)">
        {{ menu.name }}
      </el-menu-item>
    </el-menu>
    <div class="demo-container-right flex-1">
      <router-view></router-view>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.demo-container {
  height: 100vh;
  &-right {
    background: #fff;
    overflow: auto;
  }
}
</style>
